<template>
	<view class="container">
		<view class="padding-sm bg-white flex justify-between align-center">
			<view
				class="bg-F4F4F4 flex justify-end align-center round padding-left padding-bottom-xs padding-right padding-top-xs">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 26rpx;height: 26rpx;"></image>
				<input type="text" confirm-type="search" value="" @confirm="getNearbyShop" v-model="keywords"
					class="margin-left-sm f-grow1" placeholder="搜索服务网点" />
			</view>
			<view class="text-15 padding-left-sm text-bold flex justify-start align-center">
				<image :src="baseUrl + '/static/position.png'" mode="" style="height: 28rpx;width: 28rpx;"></image>
				<view class="margin-left-xs margin-right-xs text-221815 text-cut" style="width: 178rpx;">
					{{address}}
				</view>
			</view>
		</view>
		<map style="height: 842rpx;width: 750rpx;" :latitude="latitude" :longitude="longitude" :show-location="true"
			:show-compass="true" :enable-3D="true" :enable-overlooking="true" :markers="markers"></map>
		<!-- <view class="s-fooder"> -->
			<view class="text-15 text-221815 padding bg-white text-center">
				选择服务网点
			</view>
			<scroll-view style="height:calc(100vh - 1046rpx)" :scroll-top="scrollTop" scroll-y="true"
				class="scroll-Y bg-white">
				<view class="flex justify-between align-center bg-white solid-bottom" v-for="item in NearbyShop"
					@click="cheacked(item.id)">
					<view class="padding-sm flex justify-start align-center f-grow1">
						<image :src="item.logo" mode="" class="cu-avatar round"></image>
						<view class="f-grow1 margin-left-xs">
							<view class="text-15 text-black text-bold text-cut" style="width: 484rpx;">
								{{item.shopName}}
							</view>
							<view class="text-cut margin-top-xs" style="width: 484rpx;">
								{{item.address}}
							</view>
						</view>
					</view>
					<image v-if="item.id==service_id" :src="baseUrl + '/static/selected.png'" mode=""
						class="margin-left margin-right-sm" style="width: 26rpx;height: 26rpx;"></image>
					<image v-else :src="baseUrl + '/static/unselected.png'" mode="" class="margin-left margin-right-sm"
						style="width: 26rpx;height: 26rpx;"></image>
				</view>
			</scroll-view>
		<!-- </view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				map: '',
				latitude: '',
				longitude: '',
				markers: [],
				points: [],
				NearbyShop: [],
				address: '',
				service_id: '',
				keywords: ''
			};
		},
		onLoad(options) {
			console.log(options.service_id)
			if (options.service_id) {
				this.service_id = options.service_id
			}
			// // 实例化API核心类
			let that = this
			// this.$TMap
			// this.map = new this.$TMap({
			//     key: 'JWQBZ-LUAW4-R36U7-XR6BR-VA5VK-PZBB6' // 必填
			// });
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.getAddress(res.longitude, res.latitude)
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
				}
			});
			that.getNearbyShop()
		},
		methods: {
			async getAddress(longitude, latitude) {
				const [err, res] = await this.$get(this.$api.home_position, {
					longitude: longitude,
					latitude: latitude,
					coordinateType: 'gcj02ll'
				})
				if (res) {
					this.address = res.data.address
					// console.log(res)

				}
			},
			async getNearbyShop() {
				const [err, res] = await this.$get(this.$api.home_listNearbyShop, {
					pageNum: 1,
					pageSize: 15,
					keywords: this.keywords
				})
				if (res) {
					this.NearbyShop = res.data.list
					let markers = []
					this.NearbyShop.forEach((item) => {
						console.log(item.latitude)
						markers.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							title: item.shopName,
							iconPath: item.logo,
							width: 20,
							height: 20
						})
					})
					this.markers = markers
					// console.log(this.markers)
				}
			},
			cheacked(e) {
				// console.log(e)
				this.service_id = e
				uni.setStorage({
					key: 'service_id',
					data: e
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s-fooder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 262rpx;
	}
</style>
